<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body style="height: auto;">
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div style="background-image: url(img/banner2.jpeg); width: 100%; height: 160px; background-size: 100% 100%; text-align: center; background-repeat: no-repeat;">					
			<header class="mui-bar mui-bar-nav"  style="opacity: 0.6;">
		    	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    	<h1 class="mui-title">我的</h1>
		    	<a class="mui-icon mui-icon-email" style="float: right;"></a>
		    	<a class="mui-icon mui-icon-gear" style="float: right;padding-right:20px ;"></a>
			</header>
		<a class="mui-icon mui-icon-contact"></a>
		<a style="line-height:200px;" >
			登陆/注册
		</a>
		</div>
        <!--div1-->
		<nav  class="mui-bar-tab" style="width:auto; height: 80px; border: solid lightgray;text-align: center; ">			
			    <a class="mui-tab-item mui-active">
			        <span class="mui-icon mui-icon-bars" style="font-size:25px ; width: 30px; color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px; color:black">全部订单</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-undo" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">待付款</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-refresh" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">未出行</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-help" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">待评价</span>
			    </a>			
		</nav>
		<!--div2-->
		<nav style="width:auto; height: 120px; border: solid lightgray;text-align: center; ">
			<div style="width:auto; height: 50px; border-bottom: 2px solid lightgray; text-align: center; ">
				<a class="mui-icon mui-icon-contact" style="float: left; line-height: 50px; width: 50px; color: darkslategray;"></a>
				<a  style="float: left; line-height: 50px; color: darkslategray;">我的钱包</a>
				<a class="mui-icon mui-icon-arrowright"style="float: right;color: darkslategray; line-height: 45px; font-size: 15px; opacity: 0.4;"></a>
				<a style="float: right;color: darkslategray; line-height: 50px; opacity: 0.4; font-size: 15px" >银行卡，会员等</a>
			</div>
			<div class="mui-bar-tab" style="line-height: 25px;">
				 <a class="mui-tab-item mui-active">
			        <span class="mui-icon " style="font-size:18px ; width: 45px; color:black;line-height: 38px;">0.00</span>
			        <span class="mui-tab-label" style="font-size: 14px; color:black">用户余额</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon " style="font-size:18px ; width: 45px; color:black;line-height: 38px;">0.00</span>
			        <span class="mui-tab-label" style="font-size: 14px;color:black">优惠券</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon " style="font-size:18px ; width: 45px; color:black;line-height: 38px;">0.00</span>
			        <span class="mui-tab-label" style="font-size: 14px;color:black">积分</span>
			    </a>
			</div>
		</nav >
		<!--nav3-->
		<nav style="width:auto; height: 150px; border: solid lightgray;text-align: center; ">
			<nav  class="mui-bar-tab" style="width:auto;height: auto; text-align: center;  padding-top:10px; ">			
			    <a class="mui-tab-item mui-active">
			        <span class="mui-icon mui-icon-bars" style="font-size:25px ; width: 30px; color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px; color:black">全部订单</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-undo" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">待付款</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-refresh" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">未出行</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-help" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">待评价</span>
			    </a>			
			</nav>
			<nav  class="mui-bar-tab" style="width:auto; text-align: center;height: auto;padding-top: 20px;">			
			    <a class="mui-tab-item mui-active">
			        <span class="mui-icon mui-icon-pengyouquan" style="font-size:25px ; width: 30px; color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px; color:black">长途订单</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-loop" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">离线攻略</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-settings" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">电子发票</span>
			    </a>
			    <a class="mui-tab-item">
			        <span class="mui-icon mui-icon-plusempty" style="font-size:25px ; width: 30px;color:black"></span>
			        <span class="mui-tab-label" style="font-size: 10px;color:black">更多
			        </span>
			    </a>			
			</nav>
		</nav>
		<nav style="width: auto; height: 50px; text-align: center;">
			<a style="line-height: 50px;">绑定12306</a>
		</nav>
	</body>
</html>